<template>
  <div class="pcenter-page page">
    <div class="title-group">
      <span>个人中心</span>
    </div>
    <div class="page-content">
      <div class="my-archive-wrapper">
        <div class="user-content">
          <div class="user-info">
            <div class="avatar" :style="{'background-image': 'url('+userInfo.icon+')'}"></div>
            <div class="info">
              <p>{{userInfo.nickname}}</p>
              <p class="tip">ID：{{userInfo.uid}}</p>
            </div>
          </div>
          <div class="vip-info" v-if="vipInfo.status">
            <div class="vip-msg">
              <img style="width: 20px;" src="../../assets/images/icon-vip1.png" />
              <span>{{vipInfo.levelDesc}}</span>
            </div>
            <span class="high-light">到期日期：{{vipInfo.endTime}}</span>
          </div>
        </div>
        <div class="archive-tabs-content">
          <tabs v-model:active="tabAtiveName" class="archive-tabs large-tabs">
            <tab title="我的档案" name="archive">
              <div class="archive-content">

              </div>
            </tab>
            <tab title="会员中心" name="pcenter">
              <div class="pcenter-wrapper">
                <div class="order-content">
                  <p class="title">付费记录</p>
                  <order-list></order-list>
                </div>
                <div class="rights-content">
                  <div class="common-desc-list" v-if="productDescObj[vipInfo.levelName]">
                    <div class="desc-item" v-for="(desc, i) in productDescObj[vipInfo.levelName].common" :key="'common_'+i">
                      <i class="iconfont icon-duigou"></i>
                      <span class="text">{{desc}}</span>
                    </div>
                  </div>
                  <div class="desc-list" :class="vipInfo.levelName" v-if="productDescObj[vipInfo.levelName]">
                    <div class="desc-item" v-for="(desc, i) in productDescObj[vipInfo.levelName].desc" :key="'desc_'+i">
                      <i class="iconfont icon-weixuanzhongyuanquan"></i>
                      <span class="text">{{desc}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </tab>
          </tabs>
        </div>
      </div>
    </div>
  </div>
  <footer-menus></footer-menus>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { Tab, Tabs } from 'vant';
import FooterMenus from '../../components/footer-menus.vue'
import OrderList from './order-list.vue'
import constants from "../../common/constants";
import api from "../../api";
import common from "../../common/common";
import {formatTime} from "../../common/utils";
const productDescObj = constants.VipRightsDesc
const tabAtiveName = ref('archive')
const userInfo = ref({
  nickname: '',
  icon: '',
  uid: '',
  is_bind_wechat: false,// 是否绑定微信
  is_bind_external_wechat: false,// 是否添加外部联系人微信
})
const vipInfo = ref({
  levelDesc: '',
  levelName: 'free',// free plus pro
  status: 0,//会员状态 0非 1会员
  endTime: ''
})
const getUserInfo = async () => {
  const uid = common.getLocalUid()
  try {
    const res = await api.getUserInfo({uid})
    if (res && res.uid) {
      userInfo.value.nickname = res.nickname
      userInfo.value.icon = res.icon.replace(/.*?(?=\/user_portrait)/, '')
      userInfo.value.uid = res.uid
      userInfo.value.is_bind_wechat = res.is_bind_wechat || false
      userInfo.value.is_bind_external_wechat = res.is_bind_external_wechat || false
    }
  } catch(e) {
    console.log(e)
  }
}
const getUserVipInfo = () => {
  api.getVipInfo().then((res) => {
    if (res.data) {
      vipInfo.value.levelDesc = res.data.levelDesc
      vipInfo.value.levelName = res.data.levelName
      vipInfo.value.status = res.data.currentMemberStatus
      vipInfo.value.endTime = res.data.endTime ? formatTime(res.data.endTime) : ''
    }
  })
}
getUserInfo()
getUserVipInfo()
</script>

<style scoped lang="less">
.pcenter-page {
  position: relative;
  height: 100%;
  padding-bottom: 52px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--van-primary-color);
}
.page-content{
  overflow-y: auto;
  background: #fff;
}
.user-content{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 35px;
  .user-info{
    position: relative;
    display: flex;
    align-items: center;
    .avatar{
      width: 80px;
      height: 80px;
      border-radius: 80px;
      box-sizing: border-box;
      background-size: 100% 100%;
      background-color: rgba(0, 0, 0, 0.05);
    }
    .info{
      position: relative;
      height: 80px;
      flex-direction: column;
      justify-content: space-around;
      display: flex;
      margin-left: 12px;
    }
  }
  .vip-info{
    position: relative;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--van-primary-color);
    .vip-msg{
      span{
        margin-left: 10px;
      }
    }
  }
  .vip-option{
    display: flex;
    height: 80px;
    flex-direction: column;
    justify-content: center;
  }
}
.order-content{
  position: relative;
  width: 70%;
  .title{
    color: rgba(0,0,0,0.5);
    font-size: 1.2rem;
    padding-bottom: 10px;
  }
}
.desc-item{
  position: relative;
  display: flex;
  align-items: center;
  margin: 10px 0;
  .iconfont{
    margin-right: 10px;
    font-weight: bold;
    font-size: 1.4rem;
  }
  .icon-duigou{
    color: var(--van-primary-color);
  }
}
.free .desc-item .iconfont{
  color: var(--van-danger-color);
}
.plus .desc-item .iconfont{
  color: var(--van-warning-color);
}
.pro .desc-item .iconfont{
  color: var(--van-primary-color);
}
</style>
